<template>
    <div class="number-grow-warp">
        <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value" :style="{color:color}">0</span>
    </div>
</template>
 
<script>
export default {
    name:"NumberGrowWarp",
    props: {
        time: {
            type: Number,
            default: 1.5
        },
        value: {
            type: Number,
            default: 0,
            require:true
        },
        color:{
            type: String,
            default:"#ffaf00"
        }
    },
    watch: {
        value(newValue){
            this.numberGrow(this.$refs.numberGrow,newValue)
        }
    },
    methods: {
        numberGrow(ele,value) {
            let step = (value * 10) / (this.time * 1000)
            let current = 0
            let start = 0
            let t = setInterval(function () {
                start += step
                if (start > value) {
                    clearInterval(t)
                    start = value
                    t = null
                }
                if (current === start) {
                    return
                }
                current = start
                ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
            }, 10)
        }
    }
}
</script>
 
<style scoped>
.number-grow-warp {
    transform: translateZ(0);
}
.number-grow {
    font-family: Arial-BoldMT;
    letter-spacing: 2.67px;
    display: block;
    line-height: 64px;
}
</style>